import './index.scss'
// 维护页面
import http from '../../../../utils/http';
import { useParams } from "react-router-dom";
import { Button, Form, Input, Space,Table ,Checkbox, Select,UploadProps,message, Upload} from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import {FC, useEffect, useState} from 'react';
const { Option } = Select;

const Maintain:FC = () => {
  // iqc主管审核id
  let { id } = useParams();
  const [data,setData] = useState<DataType[]>([])
  useEffect(()=>{
    getData()
  },[])
// 获取数据所有数据
const getData = () => {
  http({
    url:'/getWeihu',
    method:'get'
  }).then(data => {
    if(data.code===200){
      setData(data.data.data)
    }
  }).catch(error => {console.log(error)})
}
// 获取input框的值
const onFinish = (values: any) => {
  console.log('Success:', values);
};
// table-----
interface DataType {
  key: string;
  id1:number
  id2:string
  id3:string
  id4:string
  id5:string
  id6:boolean
  id7:string
  id8:string
  id9:string
  id10:string
  id11:string
  id12:string
}
// 手动输入
const checkboxChange = (json:DataType,e:any) =>{
  let arr = [...data]
  arr.map(v=>{
    if(v.id1===json.id1) v.id6 = e.target.checked
  })
  setData(arr)
}
// 实测值
const inputVal = (json:DataType,e:any) => {
  let arr = [...data]
  arr.map(v=>{
    if(v.id1===json.id1) v[e.target.name] =e.target.value
  })
  setData(arr)
}
// select
const handleChange = (json:DataType,e: any) => {
  let arr = [...data]
  arr.map(v=>{
    if(v.id1===json.id1) v.id10 =e
  })
  setData(arr)
};
// 图片
const picture: UploadProps = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
// 删除按钮
const delBtn = (id:any) => {
  console.log(id)
}


const columns: ColumnsType<DataType> = [
  {
    title: '序号',
    dataIndex: 'id1',
    key: 'id1',
    className:'headerBg',
    align:'center',
  },
  {
    title: '检验项目',
    dataIndex: 'id2',
    key: 'id2',
    className:'headerBg',
    align:'center',
  },
  {
    title: '检验方案',
    dataIndex: 'id3',
    key: 'id3',
    className:'headerBg',
    align:'center',
  },
  {
    title: '抽样数',
    key: 'id4',
    dataIndex: 'id4',
    className:'headerBg',
    align:'center',
  },
  {
    title: '标准',
    key: 'id5',
    dataIndex: 'id5',
    className:'headerBg',
    align:'center',
  },
  {
    title: '手动输入',
    key: 'id6',
    dataIndex: 'id6',
    className:'headerBg',
    align:'center',
    render:(_,record) => <Checkbox onChange={(e) => {checkboxChange(record,e)}} checked={record.id6}></Checkbox>
  },
  {
    title: '实测值',
    key: 'id7',
    dataIndex: 'id7',
    className:'headerBg',
    align:'center',
    render:(_,record) => <input onChange={ (e)=>inputVal(record,e)} name="id7" value={record.id7}/>
  },
  {
    title: '合格数',
    key: 'id8',
    dataIndex: 'id8',
    className:'headerBg',
    align:'center',
    render:(_,record) => <input onChange={(e)=>inputVal(record,e)} name="id8" value={record.id8}/>
  },
  {
    title: '不合格数',
    key: 'id9',
    dataIndex: 'id9',
    className:'headerBg',
    align:'center',
    render:(_,record) => <input onChange={(e)=>inputVal(record,e)} name="id9" value={record.id9}/>
  },
  {
    title: '判定',
    key: 'id10',
    dataIndex: 'id10',
    className:'headerBg',
    align:'center',
  render:(_,record) => <Select defaultValue="lucy" onChange={(e)=>handleChange(record,e)} value={record.id10}>
    <Option value="合格">合格</Option>
    <Option value="不合格">不合格</Option>
  </Select>
  },
  {
    title: '附件',
    key: 'id11',
    dataIndex: 'id11',
    className:'headerBg',
    align:'center',
    render:(_,record) =>  <Upload {...picture}>
    <Button>上传文件</Button>
  </Upload>
  },
  {
    title: '备注',
    key: 'id12',
    dataIndex: 'id12',
    className:'headerBg', 
    align:'center',
    render:(_,record) => <input onChange={(e)=>inputVal(record,e)} name="id12" value={record.id12}/>
  },
  {
    title: '编辑',
    key: 'action',
    className:'headerBg',
    align:'center',
    render: (_, record) => (
      <Button onClick={ ()=> delBtn(record)} type='link' danger>删除</Button>
    ),
  },
];


  return <>
  <Form
      name="basic"
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      autoComplete="off"
      layout="inline"
      labelCol={{ span: 8}}
    >
      <Space size={[120, 10]} wrap>
      <Form.Item label="供应商简称" name="username0">
        <Input size="small"/>
      </Form.Item>
      <Form.Item label="送货批次" name="username1">
        <Input size="small"/>
      </Form.Item>
      <Form.Item label="送货数量" name="username2">
        <Input size="small"/>
      </Form.Item>
      <Form.Item label="物料类型" name="username3">
        <Input size="small"/>
      </Form.Item>
      <Form.Item labelCol={{ offset: 1}} label="物料编码" name="username4">
        <Input size="small"/>
      </Form.Item>
      <Form.Item labelCol={{ offset: 1}} label="物料名称" name="username5">
        <Input size="small" />
      </Form.Item>
      <Form.Item labelCol={{ offset: 4}} label="图号" name="username6">
        <Input size="small"/>
      </Form.Item>
      <Form.Item labelCol={{ offset: 2}} label="图纸版本号" name="username7">
        <Input size="small"/>
      </Form.Item>

      </Space>
      {/* <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item> */}
    </Form>
    <div className='tit'>检验报告</div>
    <hr />
    <Table rowKey={(record)=>record.key} bordered size="small" pagination={false} columns={columns} dataSource={data} />
    
  </>
}

export default Maintain

function e(id: any, e: any): void {
  throw new Error('Function not implemented.');
}
